<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>工作时间计算器</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/avalon.modern.min.js"></script>
</head>
<body>
<br/>
<br/>
<br/>

<div class="container" ms-controller="main">
    <div  class="row">
        <div class="col-sm-4">
            <input type="text" class="form-control" placeholder="输入节点时间" ms-duplex="input" ms-on-keyup="hotKey"/>
        </div>
        <div class="col-sm-4">
            <button class="btn btn-primary btn-block" ms-click="add">确定</button>
        </div>
        <div class="col-sm-4">
            t1-->
            <span ms-repeat="s">
                {{el}}:
            </span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            t2-->
            <span ms-repeat="e">
                {{el}}:
            </span>
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="col-sm-2">
            <div>时间段：</div>
            <div ms-repeat="all">
                {{el}}个小时
            </div>
        </div>
        <div class="col-sm-2">
            <div>总时间：{{totle}}个小时</div>
        </div>
    </div>
</div>

</body>
<script>
    avalon.ready(function(){
        var vm=avalon.define({
            $id:"main",
            ready:function(){

            },
            //输入控制
            input:"",

            //计算
            add:function(){
                var Time=vm.input.split(" ")
                Time[0]=parseInt(Time[0])
                Time[1]=parseInt(Time[1])
                //判断所在时区
                if(Time[0]==12||Time[0]==6){
                    //不在计算时间之内,予以剔除
                    vm.input=""
                }
                else if(vm.s==""){
                    //还没输入开始时间
                    vm.s=Time
                    vm.input=""
                }
                else if(vm.e==""){
                    //输入了开始时间还没输入结束时间
                    vm.e=Time

                    //开始计算
                    var r=doAdd(vm.s,vm.e)
                    vm.all.push(r)
                    vm.totle=vm.totle+r

                    vm.s=[]
                    vm.e=[]
                    vm.input=[]

                }
                else{
                    console.log("程序还没有处理干净")
                }



                //计算函数
               function doAdd(T1,T2){

                   var t1=T1[0]*60+T1[1]
                   var t2=T2[0]*60+T2[1]
                   return dr=(t2-t1)/60 //计算并换算为小时
               }

            },

            //输出显示
            s:[],
            e:[],
            all:[],
            totle:0,

            hotKey:function(event){
                var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
                if (keyCode == 13) {
                    vm.add();//处理函数
                }
            }

        })
        avalon.scan()
        return main=vm

    })
</script>
</html>